<template>
  <div class="container">
    <div class="header_bt w_100">
      <div class="heades">
        <div class="heades_l">
          <div class="logo">
            <h1>磨憨口岸跨境物流一站式综合服务平台</h1>
          </div>
        </div>
        <div class="heades_user">
          <span class="heades_user-l">测试用户1</span>
        </div>
      </div>
    </div>
    <!--轮播登录背景-->
    <div class="foucus">
      <div class="login_box">
        <div class="login">
          <div class="login_form">
            <div class="login_form-tab">
              <div class="tab_left">
                <span :class="tab_event == 0 ? 'span_curr':'span_n'" @click="handleClick(0)">账号登录</span>
              </div>
              <div class="tab_right">
                <span :class="tab_event == 1 ? 'span_curr':'span_n'" @click="handleClick(1)">卡介质</span>
              </div>
            </div>
            <!--表单登录-->
            <div v-if="tab_event == 0" class="login_form-model">
              <el-form ref="form" :model="loginForm" size="small">
                <el-form-item>
                  <el-input prefix-icon="el-icon-user" v-model="loginForm.userName" placeholder="用户名/手机号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input prefix-icon="el-icon-unlock" v-model="loginForm.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input prefix-icon="el-icon-key" v-model="loginForm.captcha" placeholder="用户名/手机号" style="width: 60%;"></el-input>
                  <div class="login_form-code">
                    <img src="./captcha.png"/>
                  </div>
                </el-form-item>
              </el-form>
              <div class="login_btn">
                <el-button type="primary">登录</el-button>
              </div>

              <div class="login_opt">
                <span class="login_opt-reg">新用户注册</span>
                <span class="login_opt-forg">忘记密码</span>
              </div>
            </div>
            <!--卡介质-->
            <div v-if="tab_event == 1">正在加载插件</div>
          </div>
        </div>
      </div>
    </div>
    <!--功能模块-->
    <div class="app_container">
      <div class="app_container-bg">
        <div class="app_container-tip">我的应用</div>
      </div>
      <div class="app_container-tab">
        <div class="grid">

          <div class="grid-item" v-for="(item, index) in menuList" :key="index">
            <div class="grid-item-con">
              <span class="grid-item_icon">
                <img src="./grid.png"/>
              </span>
              <span class="grid-item_title">
                {{ item.name }}
              </span>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!--新闻动态-->
    <div class="news_container">
      <div class="news_container-tab">
        <div class="news_container-tab-1">
          <span :class="hover_event == 0 ? 'hover' : ''" @click="handleHover(0)">新闻动态</span>
        </div>
        <div class="news_container-tab-1">
          <span :class="hover_event == 1 ? 'hover' : ''" @click="handleHover(1)">通知公告</span>
        </div>
      </div>
      <div class="news_list">
        <ul class="news_list-items" v-for="(item, index) in  newsList" :key="index">
          <li>
            <a href="javascript:">{{ item.title }}</a>
            <span style="float: right;">{{ item.date }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!--业务咨询-->
    <div class="news_container mt20">
      <div class="news_container-tab">
        <div class="news_container-tab-1">
          <span :class="hover_serve == 0 ? 'hover' : ''" @click="handleServe(0)">口岸咨询</span>
        </div>
        <div class="news_container-tab-1">
          <span :class="hover_serve == 1 ? 'hover' : ''" @click="handleServe(1)">政策法规</span>
        </div>
        <div class="news_container-tab-1">
          <span :class="hover_serve == 2 ? 'hover' : ''" @click="handleServe(2)">口岸收费公示</span>
        </div>
        <div class="news_container-tab-1">
          <span :class="hover_serve == 3 ? 'hover' : ''" @click="handleServe(3)">用户服务</span>
        </div>
      </div>
      <div class="news_list">
        <ul class="news_list-items" v-for="(item, index) in  dataList" :key="index">
          <li>
            <a href="javascript:">{{ item.title }}</a>
            <span style="float: right;">{{ item.date }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      tab_event: 0,
      hover_event: 0,
      hover_serve: 0,
      loginForm: {
        userName: '',
        password: '',
        uuid: '',
        captcha: ''
      },
      menuList: [
        {
          name: "一站式申报单",
          icon: "grid.png"
        },
        {
          name: "舱单申报查询",
          icon: "grid.png"
        },
        {
          name: "运输工具确报查询",
          icon: "grid.png"
        },
        {
          name: "重车作业单管理",
          icon: "grid.png"
        },
        {
          name: "新车作业单管理",
          icon: "grid.png"
        },
        {
          name: "空车作业单管理",
          icon: "grid.png"
        },
        {
          name: "监管场所作业单",
          icon: "grid.png"
        },
        {
          name: "确报申报查询",
          icon: "grid.png"
        },
        {
          name: "进出境车辆登记",
          icon: "grid.png"
        },
        {
          name: "驾驶员登记",
          icon: "grid.png"
        },
        {
          name: "带入场车辆",
          icon: "grid.png"
        },
        {
          name: "车辆过卡记录",
          icon: "grid.png"
        },
      ],
      newsList: [
        {
          title: "俄罗斯极地黄金公司2024年利润大幅增长",
          date: "2025-03-20"
        },
        {
          title: "巴西央行将2025年通胀率预期保持在5.65%",
          date: "2025-03-20"
        },
        {
          title: "加拿大政府制定联邦公共服务人工智能战略",
          date: "2025-03-20"
        },
        {
          title: "欧佩克：主要产油国将从4月起逐步增产",
          date: "2025-03-22"
        },
        {
          title: "东京都23区2月核心CPI同比上涨2.2%",
          date: "2025-03-14"
        }
      ],
      dataList: [
        {title: "云南临沧：沧源咖啡产业发展加力提速", date: "2025-03-18"},
        {title: "云南临沧：沧源咖啡产业发展加力提速", date: "2025-03-18"},
        {title: "云南临沧：沧源咖啡产业发展加力提速", date: "2025-03-18"},
      ]
    }
  },
  methods: {
    handleClick(e) {
      this.tab_event = e
    },
    handleHover(e) {
      this.hover_event = e
      if (e == 0) {
        this.newsList = [
          {
            title: "俄罗斯极地黄金公司2024年利润大幅增长",
            date: "2025-03-20"
          },
          {
            title: "巴西央行将2025年通胀率预期保持在5.65%",
            date: "2025-03-20"
          },
          {
            title: "加拿大政府制定联邦公共服务人工智能战略",
            date: "2025-03-20"
          },
          {
            title: "欧佩克：主要产油国将从4月起逐步增产",
            date: "2025-03-22"
          },
          {
            title: "东京都23区2月核心CPI同比上涨2.2%",
            date: "2025-03-14"
          }
        ]
      }
      if (e == 1) {
        this.newsList = [
          {
            title: "关于国际贸易“单一窗口”减免税系统更新的通知",
            date: "2025-03-18"
          },
          {
            title: "关于国际贸易“单一窗口”属地查检系统及“掌上单一窗口APP”更新的通知",
            date: "2025-03-18"
          },
          {
            title: "关于单一窗口加工贸易两步申报卡口核放单报文导入接口调整的通知",
            date: "2025-03-18"
          },
          {
            title: "关于国际贸易“单一窗口”货物申报系统更新的通知",
            date: "2025-03-12"
          },
          {
            title: "中国电子口岸数据中心关于海关系统维护的公告",
            date: "2025-03-12"
          },
        ]
      }
    },
    handleServe(e) {
      this.hover_serve = e
      if (e == 0) {
        this.dataList = [
          {title: "云南临沧：沧源咖啡产业发展加力提速", date: "2025-03-18"},
          {title: "云南临沧：沧源咖啡产业发展加力提速", date: "2025-03-18"},
          {title: "云南临沧：沧源咖啡产业发展加力提速", date: "2025-03-18"},
        ]
      }
      if (e == 1) {
        this.dataList = [
          {title: "海关总署 农业农村部公告2025年第38号（关于解除阿根廷高致病性禽流感疫情禁令的公告）", date: "2025-03-17"},
          {title: "海关总署 农业农村部公告2025年第37号（关于防止匈牙利口蹄疫传入我国的公告）", date: "2025-03-17"},
          {title: "海关总署 农业农村部公告2025年第36号（关于防止布基纳法索、肯尼亚、多哥、苏丹口蹄疫传入我国的公告）", date: "2025-03-17"},
        ]
      }
      if (e == 2) {
        this.dataList = [
          {title: "南伞口岸收费公示", date: "2025-01-10"},
          {title: "天保口岸收费公示", date: "2025-01-10"},
          {title: "勐康口岸收费公示", date: "2025-01-10"},
        ]
      }
      if (e == 3) {
        this.dataList = [
          {title: "单一窗口卡控件V1.5.24 点击下载 ", date: "2025-03-20"},
          {title: "单一窗口卡控件V1.5.24 点击下载 ", date: "2025-03-20"},
          {title: "单一窗口卡控件V1.5.24 点击下载 ", date: "2025-03-20"},
        ]
      }
    }
  }
}
</script>
<style>
@import 'index.css';
</style>
